<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>学习用例</title>
        <!-- 引入 echarts.js -->
        <script src="/static/js/pagetools/echarts.min.js"></script>
        <script src="/static/js/pagetools/jquery-1.11.3.min.js"></script>
        <link href="/static/css/index.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="cont">
            <div class="chart_cont">
                <div id="main" style="width: 600px;height:400px;"></div>
                <!-- <button onclick="get_date(1)">Peter成绩</button>
                     <button onclick="get_date(2)">James成绩</button>
                     <button onclick="get_date(3)">Mary成绩</button> -->
            </div>
            <div class="table_cont">
            <table class="table">
                <tr class="thead">
                    <th>ID</th>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>数学</th>
                    <th>物理</th>
                    <th>化学</th>
                    <th>历史</th>
                </tr>
                {%for user in userlist%}
                <tr class="tbody">
                    <td>{{user.user_id}}</td>
                    <td>{{user.user_name}}</td>
                    <td class="date">{{user.Chinese}}</td>
                    <td class="date">{{user.English}}</td>
                    <td class="date">{{user.Math}}</td>
                    <td class="date">{{user.Physics}}</td>
                    <td class="date">{{user.Chemistry}}</td>
                    <td class="date">{{user.History}}</td>
                </tr>
                {%endfor%}
            </table>
            <!-- 记录当前用户的ID -->
            <input type="hidden" id="hidden_id"/>
            <span class="tip">ps:鼠标经过显示当前用户成绩！</span>
            </div>
        </div>
        <script type="text/javascript">
         //获取第一个用户成绩
         var first = $(".tbody").eq(0).children();
         $(".tbody").eq(0).css("background-color","#FFE7CE");
         var x = first.eq(0).text()-1;
         $("#hidden_id").val(x);
         var myChart = echarts.init(document.getElementById('main'));
         // 指定图表的配置项和数据
         var option = {
             title: {
                 text:first.eq(1).text() + '成绩'
             },
             tooltip: {},
             legend: {
                 data:['成绩']
             },
             xAxis: {
                 data: ["Chinese","English","Math","Physics","Chemistry","History"]
             },
             yAxis: {},
             series: [{
                 name: '',
                 type: 'bar',
                 data: [first.eq(2).text(),first.eq(3).text(),first.eq(4).text(),first.eq(5).text(),first.eq(6).text(),first.eq(7).text()],//默认为第一个用户信息
                 itemStyle: {
                     emphasis: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(128,42,42, 0.)'
                     }
                 }
             }]
         };
         myChart.setOption(option);
         //鼠标经过图表
         myChart.on('mouseover', function (params) {
             //暂存当前用户ID
             var tr_index = $("#hidden_id").val();
             //alert(user_id);
             $(".tbody").eq(tr_index).css("background-color","#FFE7CE");
             $(".tbody").children().css("background-color","");
             //匹配表格中的数据
             $(".tbody").eq(tr_index).children().eq(params.dataIndex+2).css("background-color","#C23531")
             //解决鼠标在表格中产生的高亮
             myChart.dispatchAction({
                 type: 'downplay',
                 seriesIndex: 0
                 //dataIndex: 2
             });
             // 高亮当前图形
             myChart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: 0,
                 dataIndex:params.dataIndex
             });
             
             
         });
         //鼠标离开图表
         myChart.on('mouseout', function (params) {
             $(".tbody").children().css("background-color","");
         });

         
         
         
         //交互数据函数
         function get_date(user_id,tr_index){
             $("#hidden_id").val(tr_index);
             myChart.showLoading();
             var xmlhttp;
             if (window.XMLHttpRequest){
	               xmlhttp = new XMLHttpRequest();
             }
             else{
	               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             }   
	           xmlhttp.onreadystatechange = function(){
	               if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                     //alert(xmlhttp.responseText);
                     var json_date = eval("("+ xmlhttp.responseText +")");
                     //alert(json_date.Chinese);。
                     myChart.hideLoading();
                     myChart.setOption({
                         title: {
                             text: json_date.user_name + '成绩'
                         },
                         series: [{
                             name: 'ID:' + user_id,
                             type: 'bar',
                             data: [json_date.Chinese, json_date.English,json_date.Math,json_date.Physics,json_date.Chemistry,json_date.History]
                         }]
                     });
	                   //alert(json_date);
	               }
	           } 
             xmlhttp.open("GET", "/get_date_action?user_id="+user_id, false);
	           xmlhttp.send();
         }

         
         //鼠标经过表格
         $(".tbody").mouseenter(function(){
             $(".tbody").css("background-color","");
             $(".tbody").children().css("background-color","");
             var user_id = $(this).children(":first").text();
             var tr_index = $(this).index()-1;
             //alert(tr_index);
             $(this).css("background-color","#FFE7CE");
             get_date(user_id,tr_index);
         });
         //鼠标在表格中
         $(".date").mouseenter(function(){
             $(".date").css({"background-color":"","cursor":"pointer"});
             $(this).css("background-color","#C23531");
             //获取当前td索引
             var x = $(this).index()-2;
             //alert(x);
             myChart.dispatchAction({
                 type: 'downplay',
                 seriesIndex: 0
                 //dataIndex: 2
             });
             //app.currentIndex = (app.currentIndex + 1) % dataLen;
             // 高亮当前图形
             myChart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: 0,
                 dataIndex:x
             });
             // 显示 tooltip
             myChart.dispatchAction({
                 type: 'showTip',
                 seriesIndex: 0,
                 dataIndex: x
             });
         });
        </script>
    </body>
</html>
